<template>
	<view class="mainbgc">
		<backtop ref="backtops"></backtop>
		<view class="content">
			<view class="margin_top">
				<u-swiper :list="list1" height="150" keyName="image_text" @click="jumprul1(list1,index)" circular></u-swiper>
			</view>
			<view class="center flexbetween">
				<uni-data-picker @change="bindPickerChange" :localdata="items">
					<view class="city" style="width: 250rpx;">
						<!-- <view class="city" style="width: 250rpx;" @click="selectcity(0)"> -->
						{{startaddress}}
						<!-- {{startcitydata.city || "始发地"}} -->
					</view>
				</uni-data-picker>
				<view class="huoche_bluer" @click="changeaddress"></view>
				<uni-data-picker @change="bindPickerChange2" :localdata="items">
					<view class="city flexright" style="width: 250rpx;">
						<!-- <view class="city flexright" style="width: 250rpx;" @click="selectcity(1)"> -->
						{{emdaddress}}
						<!-- {{endcitydata.city || "目的地"}} -->
					</view>
				</uni-data-picker>

			</view>
			<view class="flexbetween header">
				<view :class="zh_sort!=0?'lansetext flexleft':'nostrongtext flexleft'" @click="changezh">推荐排序
					<view class="flexcolumn">
						<view class="shanghuijt" v-show="zh_sort==1 || zh_sort==0"></view>
						<view class="shangljt" v-show="zh_sort==2"></view>
						<view class="xiahuijt" v-show="zh_sort==2 || zh_sort==0"></view>
						<view class="xialjt" v-show="zh_sort==1"></view>
					</view>
				</view>
				<view :class="distance_sort!=0?'lansetext flexleft':'nostrongtext flexleft'" @click="changejl">离我最近
					<view class="flexcolumn">
						<view class="xiahuijt" v-show="distance_sort==0"></view>
						<view class="xialjt" v-show="distance_sort==1"></view>
					</view>
				</view>
				<view :class="rq_sort!=0?'lansetext flexleft':'nostrongtext flexleft'" @click="changerq">人气排序
					<view class="flexcolumn">
						<view class="shanghuijt" v-show="rq_sort==1 || rq_sort==0"></view>
						<view class="shangljt" v-show="rq_sort==2"></view>
						<view class="xiahuijt" v-show="rq_sort==2 || rq_sort==0"></view>
						<view class="xialjt" v-show="rq_sort==1"></view>
					</view>
				</view>
				<view :class="zx_item_ids!=''?'lansetext flexleft':'nostrongtext flexleft'" @click="yslxshow = true">
					运输类型
					<view class="flexcolumn">
						<view class="xiahuijt" v-show="zx_item_ids==''"></view>
						<view class="xialjt" v-show="zx_item_ids!=''"></view>
					</view>
				</view>
			</view>
			<!--专线-->
			<view class="flexcenter" style="padding-top: 200rpx;" v-if="!list.data.length">
				<view class="placeimage"></view>
			</view>
			<view class="" v-if="list.data.length">
				<view class="nav_a  flex_wrap" @click="xiangqing(item.id)" v-for="item in list.data" :key="item.id">
					<!-- 直达 -->
					<view class="xian ">
						<view class="zd flexbetween">
							<view class="flexleft">
								<view class="zhida" v-if="item.sfzz_status==0">直达</view>
								<view class="zhongzhuan" v-if="item.sfzz_status==1">中转</view>
								<view class="zhengzhou" style="max-width: 150rpx;">{{item.sfcityinfo}}</view>
								<view class="huoche"></view>
								<view class="luoyang" style="max-width: 150rpx;">{{item.ddcityinfo}}</view>
							</view>
							<view class="flexleft">
								<view class="hui">查看详情</view>
								<view class="right_icon flexright"></view>
							</view>
						</view>
					</view>
					<view class="nav_b">
						<view class="flexleft">
							<view class="left">
								<image :src="item.user.avatar_text" mode="" class="car_img"></image>
							</view>
							<view class="right">
								<view class="flexbetween">
									<view class="right_henan">{{item.shop.shop_name}}</view>
									<view class="vip" v-if="item.user.vip_status==1">VIP认证</view>
								</view>
								<view class="flexleft flex_wrap">
									<view class="puhuo" v-for="ite in item.flags" :key="ite">{{ite}}</view>
								</view>
							</view>
						</view>
						<!-- 地址 -->
						<view class="add flexbetween">
							<view class="flexleft">
								<view class="address">{{item.cf_address}}</view>
								<view class="km">{{kmUnit(Number(item.distance))}}</view>
							</view>
							<view class="flexleft">
								<!-- <view class="locations ii" @click.stop="openmap(item)"></view> -->
								<view class="phone" v-if="item.cf_mobile" @click.stop="phone(item.cf_mobile,item.id)"></view>
							</view>
						</view>
						<view class="liu flexbetween">
							<view class="liulan">浏览量：{{item.views}}</view>
							<view class="liulan">拨打量：{{item.call_num}}</view>
							<view class="liulan">转发量：{{item.share_num}}</view>
						</view>
					</view>
				</view>
				<view class="footertextdaodi">老板！到底没数据了！</view>
			</view>

		</view>
		<u-popup :show="yslxshow" :round="10" mode="bottom" @close="yslxshow=false">
			<view class="nav">
				<view class="form">运输类型</view>
				<view class="flexleft flex_wrap">
					<view :class="item.ischeck?' lan':'pu'" v-for="(item,index) in columns" :key="item.id"
						@click="changeitem(item)">
						{{item.name}}
					</view>
				</view>
				<view class="footer flexbetween">
					<view class="resetbtn" @click="resetzblx">重置</view>
					<view class="surebtn" @click="Confirmzblx">确认</view>
				</view>
			</view>
		</u-popup>
		<!-- <yunshulxpicker :messageInfo="{yslxshow:yslxshow}" @sureyslx="sureyslx"></yunshulxpicker> -->
		<pickercity :messageInfo="{pickerdzshow:pickerdzshow}" @surecity="surecity"></pickercity>
	</view>
</template>
<script>
	const httpRequest = require("@/common/httpRequest.js")
	import citys from "@/static/city/city.js"
	export default {
		data() {
			return {
				// 运输类型选择器开始
				yslxshow: false,
				zx_item_ids: "",
				zx_item: "",
				// 运输类型选择器结束
				// 城市选择器开始
				pickerdzshow: false, //城市选择器
				items: [],
				pickerdzshow: false, //城市选择器
				startcitydata: { //始发地
					provence: "",
					provenceid: "",
					city: "",
					cityid: "",
					county: "",
					countyid: "",
				},
				endcitydata: { //目的地
					provence: "",
					provenceid: "",
					city: "",
					cityid: "",
					county: "",
					countyid: "",
				},
				currenttype: "", //0始发地，1结束地
				// 城市选择器结束
				lat: "",
				lng: "",
				zh_sort: 0, //:0=不按综合排序,1=降序,2=升序
				rq_sort: 0, //:0=不按人气排序,1=降序,2=升序
				distance_sort: 0,
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				columns: [],
				list1: [],
			}
		},
		onLoad(options) {
			if (options.msg) {
				let data = JSON.parse(decodeURIComponent(options.msg));
				this.startcitydata = data.startcitydata
				this.endcitydata = data.endcitydata
			}
			this.getlocation()
			this.zxItem()
			this.getlbt()
			let arr = JSON.parse(JSON.stringify(citys.data))
			arr.forEach(item => {
				item.children.forEach(ite => {
					ite.children.unshift({
						"value": "",
						"text": "不限",
						"pid": ""
					})
				})
				item.children.unshift({
					"value": "",
					"text": "不限",
					"pid": "",
				})
			})
			arr.unshift({
				"value": "14774747474",
				"text": "全国",
				"pid": "",
			})
			this.items = arr
		},
		onPageScroll(res) {
				if (res.scrollTop > 700) {
					this.$refs.backtops.isshow = true
				} else {
					this.$refs.backtops.isshow = false
				}
			},
		onShow() { //新增默认首页显示全部
			this.init()
		},
		computed:{
			
			startaddress(){
				if(this.startcitydata.countyid){
					return this.startcitydata.county
					return false
				}
				if(this.startcitydata.cityid && this.startcitydata.countyid==""){
					return this.startcitydata.city
					return false
				}
				if(this.startcitydata.provenceid && this.startcitydata.cityid=="" && this.startcitydata.countyid==""){
					return this.startcitydata.provence
					return false
				}
				return "始发地"
			},
			emdaddress(){
				if(this.endcitydata.countyid){
					return this.endcitydata.county
					return false
				}
				if(this.endcitydata.cityid && this.endcitydata.countyid==""){
					return this.endcitydata.city
					return false
				}
				if(this.endcitydata.provenceid && this.endcitydata.cityid=="" && this.endcitydata.countyid==""){
					return this.endcitydata.provence
					return false
				}
				return "目的地"
			}
		},
		methods: {
			jumprul1(arr, index) {
				let i = []; //获取当前页面的轮播图数据
				arr.forEach(item => {
					i.push(item.image_text)
				})
				// i.push(item.image_text)
				// console.log(item)
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
				// if (item.url == "") {
				// 	return false
				// }
				// uni.navigateTo({
				// 	url: item.url
				// })
			},
			getlbt() {
				httpRequest.request('/api/index/getAdvertiseList', 'POST', {
					advertise_position_id: 14,
					is_more: 1
				}, false, false, true).then(res => {
					if (res.code == 1) {
						this.list1 = res.data
					}
				})
			},
			jumprul(item) {
				if (item.url == "") {
					return false
				}
				uni.navigateTo({
					url: item.url
				})
			},
			openmap(item) {
				uni.openLocation({
					latitude: Number(item.shop.latitude), //即将传到高德或腾讯地图的终点纬度  必须是数值，字符串无效
					longitude: Number(item.shop.longitude), //即将传到高德或腾讯地图的终点经度  必须是数值，字符串无效
					name: item.shop.shop_name, //即将传到高德或腾讯地图的店铺名称
					address: item.shop.cityinfo + item.shop.address, //即将传到高德或腾讯地图的详细地址
					scale: 18
				})
			},

			phone(p, id) {
				this.addboda(id)
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {})
			},
			addboda(id) {
				httpRequest.request('/api/zx/addZXListCallNum', 'GET', {
					id: id
				}, false, false, true).then(res => {})
			},
			zxItem() {
				httpRequest.request('/api/zx/zxItem', 'GET', {}, false, false, true).then(res => {
					if (res.code == 1) {
						res.data.forEach(item => {
							this.$set(item, "ischeck", false)
						})
						this.columns = res.data
					}
				})
			},
			Confirmzblx() {
				let arr = []
				let arr1 = []
				this.columns.forEach(item => {
					if (item.ischeck) {
						arr.push(item.id)
						arr1.push(item.name)
					}
				})
				this.zx_item_ids = arr.join()
				this.zx_item = arr1.join()
				this.yslxshow = false
				this.init()
			},
			resetzblx() {
				this.columns.forEach(item => {
					item.ischeck = false
				})
				this.zx_item_ids = ""
				this.zx_item = ""
				this.yslxshow = false
				this.init()
			},
			changeitem(item) {
				item.ischeck = !item.ischeck
			},
			// 小程序获取当前位置信息
			getlocation() {
				let _this = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						//逆地址解析  坐标转地址信息
						_this.lat = res.latitude
						_this.lng = res.longitude
						_this.init()
					}
				});
			},
			// 城市选择器开始
			changeaddress(){
				let startaddress  = this.startcitydata
				this.startcitydata = this.endcitydata
				this.endcitydata = startaddress
			},
			bindPickerChange(val) {
				let area = val.detail.value
				if(area.length==1){
					this.startcitydata.provence = area[0].text;
					this.startcitydata.provenceid = area[0].value;
					this.startcitydata.city = "";
					this.startcitydata.cityid = "";
					this.startcitydata.county = "";
					this.startcitydata.countyid = "";
				}
				if(area.length==2){
					this.startcitydata.provence = area[0].text;
					this.startcitydata.provenceid = area[0].value;
					this.startcitydata.city = area[1].text;
					this.startcitydata.cityid = area[1].value;
					this.startcitydata.county = "";
					this.startcitydata.countyid = "";
				}
				if(area.length==3){
					this.startcitydata.provence = area[0].text;
					this.startcitydata.provenceid = area[0].value;
					this.startcitydata.city = area[1].text;
					this.startcitydata.cityid = area[1].value;
					this.startcitydata.county = area[2].text;
					this.startcitydata.countyid = area[2].value;
				}
				this.init()
				
			},
			bindPickerChange2(val) {
				let area = val.detail.value
				if(area.length==1){
					this.endcitydata.provence = area[0].text;
					this.endcitydata.provenceid = area[0].value;
					this.endcitydata.city = "";
					this.endcitydata.cityid = "";
					this.endcitydata.county = "";
					this.endcitydata.countyid = "";
				}
				if(area.length==2){
					this.endcitydata.provence = area[0].text;
					this.endcitydata.provenceid = area[0].value;
					this.endcitydata.city = area[1].text;
					this.endcitydata.cityid = area[1].value;
					this.endcitydata.county = "";
					this.endcitydata.countyid = "";
				}
				if(area.length==3){
					this.endcitydata.provence = area[0].text;
					this.endcitydata.provenceid = area[0].value;
					this.endcitydata.city = area[1].text;
					this.endcitydata.cityid = area[1].value;
					this.endcitydata.county = area[2].text;
					this.endcitydata.countyid = area[2].value;
				}
				this.init()
			},
			// surecity(e) {
			// 	this.pickerdzshow = false
			// 	if (this.currenttype == 0) {
			// 		this.startcitydata = e
			// 	} else if (this.currenttype == 1) {
			// 		this.endcitydata = e
			// 	}
			// },
			// selectcity(value) {
			// 	this.currenttype = value
			// 	this.pickerdzshow = true
			// },
			// 城市选择器结束
			init(isPage, page) {
				let _this = this;
				httpRequest.request('/api/zx/zxList', 'GET', {
					page: page || 1,
					limit: _this.limit,
					lat: this.lat,
					lng: this.lng,
					keywords: "",
					distance_sort: this.distance_sort,
					zh_sort: this.zh_sort,
					rq_sort: this.rq_sort,
					zx_item_ids:this.zx_item_ids,
					cf_province_id: this.startcitydata.provenceid==14774747474?"":this.startcitydata.provenceid,
					cf_city_id: this.startcitydata.cityid,
					cf_area_id: this.startcitydata.countyid,
					dd_province_id: this.endcitydata.provenceid==14774747474?"":this.endcitydata.provenceid,
					dd_city_id: this.endcitydata.cityid,
					dd_area_id: this.endcitydata.countyid,
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							/* _this.list.data = dataList.data.concat(resList.data); */
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			kmUnit(m) {
				var v;
				if (typeof m === 'number' && !isNaN(m)) {
					if (m >= 1000) {
						v = (m / 1000).toFixed(2) + 'km'
					} else {
						v = m + 'm'
					}
				} else {
					v = '0m'
				}
				return v;
			},
			changezh() {
				this.zh_sort = this.zh_sort == 0 ? 1 : this.zh_sort == 1 ? 2 : 0
				this.init()
			},
			changejl() {
				this.distance_sort = this.distance_sort == 0 ? 1 : 0
				this.init()
			},
			changerq() {
				this.rq_sort = this.rq_sort == 0 ? 1 : this.rq_sort == 1 ? 2 : 0
				this.init()
			},
			// 运输类型
			sureyslx(e) {
				this.yslx = e
			},
			select(index) { //弹窗
				this.timetrade = index;
			},
			xiangqing(id) {
				uni.navigateTo({
					url: '/pages/index/zhuanxianxq?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.paixu {
		margin-left: 6rpx;
		margin-top: 6rpx;
	}

	.right_icon {
		margin-left: 9rpx;
	}

	.active {
		color: #228DFF;
	}

	.actived {
		color: #FFA500;
	}

	.content {
		padding: 30rpx 25rpx;
	}

	.lan {
		background: RGBA(233, 244, 255, 1);
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		padding: 20rpx 43rpx 21rpx 43rpx;
		margin: 30rpx 0rpx 0rpx 28rpx;
	}

	.pu {
		background: RGBA(247, 249, 250, 1);
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		padding: 20rpx 43rpx 21rpx 43rpx;
		margin: 30rpx 0rpx 0rpx 28rpx;
	}

	.center {
		background-color: #fff;
		padding: 35rpx 37rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.city {
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.header {
		margin-top: 30rpx;
		background-color: #fff;
		padding: 27rpx 28rpx 27rpx 28rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.gray {
		width: 8rpx;
		height: 12rpx;
		background-size: 100% 100%;
		padding-left: 6rpx;
	}

	// 
	.nav_b {
		padding: 36rpx 32rpx;
		background-color: #fff;
	}

	.right_henan {
		width: 360rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		padding-left: 19rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.puhuo {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		padding: 4rpx 18rpx 4rpx 18rpx;
		background-color: RGBA(233, 244, 255, 1);
		margin-top: 14rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-left: 14rpx;
	}

	.address {
		width: 280rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.km {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		padding-left: 16rpx;
	}

	.add {
		margin-top: 40rpx;
		border-bottom: 1rpx solid RGBA(247, 247, 247, 1);
		padding-bottom: 36rpx;
	}

	.ii {
		margin-right: 22rpx;
	}

	.liu {
		padding-top: 30rpx;
	}

	.liulan {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.nav_a {
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 30rpx 0rpx;
	}

	.zhida {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		border: 1rpx solid rgba(34, 141, 255, 1);
		padding: 0rpx 10rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.zhongzhuan {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFA500;
		border: 1rpx solid rgba(255, 165, 0, 1);
		padding: 0rpx 10rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.zhengzhou {
		padding: 0rpx 20rpx 0rpx 14rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.zd {
		padding: 31rpx 32rpx;
	}

	.luoyang {
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		padding: 0rpx 20rpx;
	}

	.xiangqing {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		padding-right: 11rpx;
		padding-left: 261rpx;
	}

	.xian {
		border-bottom: 2rpx solid RGBA(247, 247, 247, 1);
	}

	.car_img {
		width: 132rpx;
		height: 132rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	// 
	.zhida {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
	}

	.city {
		font-size: 34rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		padding-left: 12rpx;
	}

	.nav_header {
		padding-bottom: 32rpx;
		border-bottom: 1rpx solid RGBA(247, 247, 247, 1);
	}

	.look {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.form {
		text-align: center;
		padding-top: 54rpx;
		padding-bottom: 61rpx;
	}

	.transport {
		height: 200rpx;
		padding: 0rpx 30rpx;
		overflow-x: hidden;
	}

	.chongzhi {
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		border: 1rpx solid #228DFF;
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		padding: 20rpx 128rpx 17rpx 129rpx;
	}

	.queren {
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #fff;
		background-color: rgba(34, 141, 255, 1);
		border: 1rpx solid #228DFF;
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		padding: 20rpx 128rpx 17rpx 129rpx;
	}

	.footer {
		padding: 72rpx 30rpx;
	}
</style>